<template>
  <div style="height:100%;">
       <el-carousel :interval="5000" arrow="always" height='400px'>
            <el-carousel-item v-for="(item,index) in banners" :key="index">
                <img src="../../assets/images/banner_01.jpg" alt="" width="100%" height="100%" />
            </el-carousel-item>
        </el-carousel>
        <ul class='custom-nav'>
            <li v-for="(item,index) in navs" :key="index">
                <h4 class="title">{{item.title}}</h4>
                <ul>
                    <li v-for="(sub_item,index) in item.children" :key="index">{{sub_item.title}}</li>
                </ul>
            </li>
        </ul>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
     banners: ['1', '2'],
     navs: [{
        title: '统计分析',
        children: [
            {
                title :'月度数据查询'
             }, {
                title :'年度数据查询'
             }, {
                title :'分地区月度数据查询'
             }, {
                title :'分地区年度数据查询'
             }
         ]
     }, {
         title : '地理信息空间查询',
         children: [
             {
                title :'卫生专题数据模糊查询'
             }, {
                title :'卫生专题数据综合查询'
             }, {
                title :'卫生专题地图浏览展示'
             }, {
                title :'空间数据查询定位'
             }
         ]
     }, {
         title : '地理信息空间分析',
         children: [
             {
                title :'卫生专题地图统计分析'
             }, {
                title :'应急卫生资源分析'
             }, {
                title :'特色区域分析'
             }]
     }, {
         title : '核心指标专题大屏',
         children: [
             {
                title :'医改检测'
             }, {
                title :'医疗服务与居民健康水平'
             }, {
                title :'卫生资源展示'
             }]
     }, {
         title : '可视化成果图集',
         children: [
             {
                title :'统计图'
             }, {
                title :'数据看板'
             }, {
                title :'统计报告'
             }]
     }]
    }
  }
}
</script>

<style lang='scss'  rel="stylesheet/scss" scoped>
.custom-nav {
 height:calc(100% - 440px);
 width: 100%;
//  display: flex;
//  justify-content: space-around;
 margin: 0;
 padding: 0;
 >li{
    list-style: none;
    width:20%;
    text-align: center;
    height: 100%;
    float: left;
    .title{
        width: 100%;
        text-align: center;
        color:#666666;
        background: #fff;
        padding: 25px 0;
    }
    ul{
     margin: 0;
     background: #F5F5F5;
     width: 100%;
     height: calc(80% - 40px);
     padding:20px 0 ;
     li{
        list-style: none;
        color:#999999;
        padding:0 0 10px 0;
        text-align: center;
        width: 100%;
        cursor: pointer;
     }
    }
 }
}
</style>
